import { Form, Input, Button, Select, Upload, message } from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import './Edit.scss'
import { useEffect, useState } from 'react';





// 下面是组件
const Edit = ({ props }) => {

    /*
    *定义状态
    */
    const [state, setState] = useState({ loading: false });

    /*
    *定义方法
    */
    const onFinish = (values) => {
        console.log('Success:', values);
    };

    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };


    const getBase64 = (img, callback) => {
        const reader = new FileReader();
        reader.addEventListener('load', () => callback(reader.result));
        reader.readAsDataURL(img);
    }

    const beforeUpload = (file) => {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJpgOrPng) {
            message.error('You can only upload JPG/PNG file!');
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
            message.error('Image must smaller than 2MB!');
        }
        return isJpgOrPng && isLt2M;
    }

    const handleChange = info => {
        if (info.file.status === 'uploading') {
            setState({ loading: true });
            return;
        }
        if (info.file.status === 'done') {
            // Get this url from response in real world.
            getBase64(info.file.originFileObj, imageUrl =>
                setState({
                    imageUrl,
                    loading: false,
                }),
            );
        }
    };

    /*
    *组件中不晓得干啥的
    */
    const { loading, imageUrl } = state;
    const uploadButton = (
        <div>
            {loading ? <LoadingOutlined /> : <PlusOutlined />}
            <div style={{ marginTop: 8 }}>Upload</div>
        </div>
    );

    
    // 下面是html结构
    return (
        <div className='Edit'>
            <Form
                name="basic"
                labelCol={{
                    span: 8,
                }}
                wrapperCol={{
                    span: 16,
                }}
                initialValues={{
                    remember: true,
                }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                <div>
                    <p>告警处理分配：</p>
                    <div>
                        <Form.Item
                            label="设备名称"
                            name="ddetName"
                            initialValue={props.mydata.ddetName}
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your username!',
                                },
                            ]}
                        >
                            <Input disabled={true} />
                        </Form.Item>

                        <Form.Item
                            label="设备编号"
                            name="ddetNumber"
                            initialValue={props.mydata.ddetNumber}
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your username!',
                                },
                            ]}
                        >
                            <Input disabled={true} />
                        </Form.Item>

                        <Form.Item
                            label="告警类型"

                        >
                            <Select
                                placeholder='告警事件'
                                disabled
                            >
                                <Select.Option value="告警事件">告警事件</Select.Option>
                            </Select>
                        </Form.Item>

                        <Form.Item
                            label="告警时间"
                            name="mrecDate"
                            initialValue={props.mydata.mrecDate}
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your username!',
                                },
                            ]}
                        >
                            <Input disabled={true} />
                        </Form.Item>

                        <Form.Item
                            label="处置状态"
                        >
                            <Select
                                placeholder='请选择'
                            >
                                <Select.Option value="请选择">请选择</Select.Option>
                                <Select.Option value="已派单">已派单</Select.Option>
                                <Select.Option value="已处理">已处理</Select.Option>
                            </Select>
                        </Form.Item>

                        <Form.Item
                            label="跟进人"
                            name="username"
                            initialValue='请输入跟进人'
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your username!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="联系方式"
                            name="username"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your username!',
                                },
                            ]}
                        >
                            <Input disabled={true} />
                        </Form.Item>

                    </div>
                </div>
                <div>
                    <p>告警详细信息：</p>
                    <div>
                        <div>
                            <Form.Item name={['user', 'introduction']} labelAlign='right' required label="处理结果">
                                <Input.TextArea autoSize={{ minRows: 4, maxRows: 200 }} />
                            </Form.Item>
                            <Form.Item
                                name={['user', 'introduction']}
                                labelAlign='right'
                                required
                                label="处理结果"
                                valuePropName="fileList"
                            >
                                <Upload
                                    label="现场照片"
                                    name="avatar"
                                    listType="picture-card"
                                    className="avatar-uploader"
                                    showUploadList={false}
                                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                                    beforeUpload={beforeUpload}
                                    onChange={handleChange}
                                >
                                    {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                                </Upload>

                            </Form.Item>

                        </div>
                        <div>
                            <div>
                                <div className='zhuang1'>告警详情</div>
                                <p>
                                    告警位置：
                                    <span>{props.mydata.dinfLocation}</span>
                                </p>
                                <p>
                                    告警内容：
                                    <span>{props.mydata.mrecContent}</span>
                                </p>
                                <p>
                                    告警阈值：
                                    <span>体温37 ~ 37.5℃</span>
                                </p>
                                <p>
                                    报警时间：
                                    <span>{props.mydata.mrecDate}</span>
                                </p>
                                <p>
                                    持续时间：
                                    <span>{props.mydata.mrecDate}</span>
                                </p>
                                <p>
                                    告警等级：
                                    <span>高</span>
                                </p>
                            </div>
                            <div>
                                <div className='zhuang2'>设备详情</div>
                                <p>
                                    设备名称：
                                    <span>{props.mydata.ddetName}</span>
                                </p>
                                <p>
                                    设备型号：
                                    <span>{props.mydata.ddetNumber}</span>
                                </p>
                                <p>
                                    设备编号：
                                    <span>ISS20200818</span>
                                </p>
                                <p>
                                    设备厂家：
                                    <span>XXX怡园科技有限公司</span>
                                </p>
                                <p>
                                    出场时间：
                                    <span>2020-02-24 14:14：58</span>
                                </p>
                                <p>
                                    产品版本：
                                    <span>V2.3</span>
                                </p>
                            </div>

                        </div>
                    </div>
                </div>
                <div>
                    <Form.Item
                        wrapperCol={{
                            offset: 8,
                            span: 16,
                        }}
                    >
                        <Button type="primary" htmlType="submit" size='large'>
                            保存
                        </Button>
                        <Button size='large' >取消</Button>
                    </Form.Item>

                </div>
            </Form>
        </div>
    );
}
export default Edit;